<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'top': this.$safeTop + 'px'}">
			<image class="navigator-button" src="/static/backArrow.png" @click="back()"></image>
			<image class="navigator-button" src="/static/moreBtn.png" @click="moreControl()"></image>
		</view>
		<scroll-view scroll-y="true" class="activity-box" v-if="activity">
			<view class="activity-img-box">
				<uni-swiper-dot class="swiper-box" :info="imgs" :current="index" mode="round" :dots-styles="dotsStyles">
					<swiper class="activity-swiper" autoplay="true" @change="indexChange">
						<swiper-item v-for="img of imgs">
							<image class="activity-img" :src="img" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="labels-box">
						<view class="label" v-for="label of labels">{{ label }}</view>
					</view>
				</uni-swiper-dot>

			</view>
			<view class="activity-title">{{ activity.name }}</view>
			<view class="price-box">
				<text class="price" v-if="activity.cost">￥179<text class="price-unit">/人</text></text>
				<text class="free" v-if="!activity.cost">免费</text>
				<text class="interested">239人感兴趣</text>
			</view>
			<view class="time-box">
				<view class="num-box">{{ startTime.getFullYear() }}</view>
				<text class="time-text">年</text>
				<view class="num-box">
					{{ (startTime.getMonth() + 1) < 10 ? `0${startTime.getMonth() + 1}` : startTime.getMonth() + 1 }}
				</view>
				<text class="time-text">月</text>
				<view class="num-box">{{ startTime.getDate() < 10 ? `0${startTime.getDate()}`: startTime.getDate() }}</view>
				<text class="time-text">日</text>
				<view class="num-box">{{ weekTransform[startTime.getDay()] }}</view>
				<view class="num-box">
					{{ startTime.getHours() < 10 ? `0${startTime.getHours()}`: startTime.getHours() }}:{{ startTime.getMinutes() < 10 ? `0${startTime.getMinutes()}` : startTime.getMinutes() }}
				</view>
			</view>
			<view class="location-box" @click="navigation()">
				<image class="location-img" src="/static/fp-mapCheck.png"></image>
				<view class="location-content">
					<text class="location-title">{{ location[0] }}</text>
					<text class="location-text">{{ location[1] }}</text>
				</view>
				<image class="location-arrow" src="/static/enterArrowW.png"></image>
			</view>
			<view class="muster-box">
				<view class="muster-title">集合成员</view>
				<view class="num-box">
					<view class="sex-box">
						<view class="sex-info-box">
							<image class="boy-img" src="/static/boyShape.png"></image>
							<text class="sex-text">男生 {{ boyUsers.length }}</text>
						</view>
						<view class="sex-info-box">
							<image class="girl-img" src="/static/girlShape.png"></image>
							<text class="sex-text">女生 {{ girlUsers ? girlUsers.length : 0 }}</text>
						</view>
					</view>
					<view class="total-box">{{ activity.activityUserList.length }}/{{ activity.maxPerson }}</view>
				</view>
				<view class="progress-bar">
					<view class="abs-bar">
						<view class="boy-progress" :style="{'width': boyWidth + 'rpx', 'border-radius': girlWidth === 0 ? '10rpx' : '10rpx 0px 0px 10rpx'}"></view>
						<view class="girl-progress" :style="{'width': girlWidth + 'rpx', 'border-radius': boyWidth === 0 ? '10rpx' : '0rpx 10px 10px 0rpx'}"></view>
					</view>
				</view>
				<view class="avatar-list">
					<view class="avatar-box" v-for="user of activity.activityUserList">
						<image class="avatar-img" :src="user.avatar"></image>
						<image class="sex-img"
							:src="user.sex === 1 ? '/static/portraitTagBoy-s.png' : '/static/portraitTagGirl-s.png'">
						</image>
					</view>
					<view class="avatar-box" v-for="i of activity.maxPerson - activity.activityUserList.length">
						<image class="avatar-img" src="/static/blankUser.png"></image>
					</view>
				</view>
			</view>
			<view class="introduction-box">
				<view class="introduction-title">活动简介</view>
				<view class="introduction-text">{{ activity.description }}</view>
			</view>
			<view class="rule-box">
				<view class="rule-title">集合规则</view>
				<view class="rule-item" v-for="(rule, index) of rules">
					<view class="rule-index">{{ index + 1 }}.</view>
					<view class="rule-content">{{ rule }}</view>
				</view>
			</view>
			<view class="user-info">
				<view class="avatar-box" @click="jumpToUserInfo()">
					<image class="avatar-img" :src="userInfo.avatar"></image>
					<image class="sex-img"
						:src="userInfo.sex === 1 ? '/static/portraitTagBoy-s.png' : '/static/portraitTagGirl-s.png'">
					</image>
				</view>
				<view class="user-content">
					<text class="user-name">{{ userInfo.nickName }}</text>
					<text class="create-time">{{ getTimeDiff(activity.createTime) }}</text>
				</view>
				<view class="button" v-if="userInfo.id !== activity.userId" @click="userInfo.follow ? chat() : followUser()">{{ userInfo.follow ? '私聊' : '关注'}}</view>
			</view>
			<view class="white-box" :style="{'height': `calc(200rpx + ${safeBottom}px)`}"></view>
		</scroll-view>
		<view class="control-box" :style="{'bottom': `calc(40rpx + ${safeBottom}px)`}" v-if="activity && activity.status === 1 && activity.allowJoin === 1">
			<view class="button1">
				<image class="chat-img" src="/static/chartBtn.png"></image>
			</view>
			<view class="button2" @click="musterActivity()" v-if="!activity.isJoin">集合</view>
			<view class="button2" @click="chatRoom()" v-if="activity.isJoin">群聊</view>
			<view class="button1">
				<image class="like-img" :src="activity.isLike ? '/static/likedBtn.png' : '/static/likeBtn.png'" @click="likeActivity()"></image>
			</view>
		</view>
		<uni-popup ref="bottomPopup" :is-mask-click="true" type="bottom" :safe-area="false"
			mask-background-color="rgba(0,0,0,0.85)">
			<view class="muster-popup" :style="{'padding-bottom': safeBottom + 'px'}" v-if="popupType === 0">
				<view class="popup-title">确认集合？</view>
				<view class="popup-text">集合后中途退出需要联系管理员退出，强制退出将扣信用分。</view>
				<view class="button-box">
					<view class="cancel-button" @click="closePopup()">再想想</view>
					<view class="confirm-button" @click="confirmMusterActivity()">确定</view>
				</view>
				<view style="height: 30rpx;"></view>
			</view>
			<view class="muster-popup" :style="{'padding-bottom': safeBottom + 'px'}" v-if="popupType === 2">
				<view class="popup-title">强制退出？</view>
				<view class="popup-text">强制退出将扣信用分。</view>
				<view class="button-box">
					<view class="cancel-button" @click="closePopup()">再想想</view>
					<view class="confirm-button" @click="confirmForceQuit()">确定</view>
				</view>
				<view style="height: 30rpx;"></view>
			</view>
			<view class="control-popup" :style="{'padding-bottom': safeBottom + 'px'}" v-if="popupType === 1">
					<view class="menu-item" v-if="isMine" @click="editActivity()">编辑活动</view>
					<view class="menu-item" v-if="isMine" @click="removeUser()">移除成员</view>
					<view class="menu-item" v-if="isMine" @click="closeSignUp()">关闭报名</view>
					<view class="menu-item" v-if="isMine" @click="cancelActivity()">取消活动</view>
					<view class="menu-item" v-if="isMine" @click="deleteActivity()">删除活动</view>
					<view class="menu-item" @click="forceQuit()"  v-if="activity.isJoin">强制退出</view>
					<view style="height: 30rpx;"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity: null,
				imgs: [],
				labels: [],
				index: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .5)',
					border: 'none',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
					selectedBorder: 'none'
				},
				startTime: new Date(),
				weekTransform: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				location: [],
				boyUsers: [],
				girlUsers: [],
				boyWidth: 0,
				girlWidth: 0,
				rules: [
					'集合过程中因个人原因无法准时参加活动，及时与发布者联系将其移除；个人强制退出将扣信用分。',
					'线下活动开始后，成员没有到场参与发布者可通过平台举报该成员，成员将扣行用分。',
					'个人信用分低于300分将无法再参加平台任何动。'
				],
				userInfo: {},
				safeBottom: 0,
				popupType: 0,
				isMine: false
			};
		},
		onLoad(q) {
			this.getActivityDetail(q.id);
			this.safeBottom = this.$safeBottom;
			uni.$on('editActivity', (id) => {
				this.getActivityDetail(id);
			})
		},
		methods: {
			jumpToUserInfo() {
				uni.navigateTo({
					url: '/pages/userDetai?userId=' + this.activity.userId
				})
			},
			chat() {
				
			},
			navigation() {
				uni.navigateTo({
					url: `/pages/navigation?name=${this.location[0]}&address=${this.location[1]}&lat=${this.activity.lat}&lon=${this.activity.lon}` 
				});
			},
			followUser() {
				const params = {
					userId: this.activity.userId,
					status: 1
				}
				this.$apis.followUser(params).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '关注成功!',
							icon: 'success'
						});
						this.getUserInfo(this.activity.userId);
					}
				})
			},
			getActivityDetail(id) {
				const params = {
					id: id
				}
				this.$apis.getActivityDetail(params).then(res => {
					if (res.code === 0) {
						this.activity = res.data;
						this.initData();
					}
				})
			},
			initData() {
				this.boyUsers = [];
				this.girlUsers = [];
				this.imgs = this.activity.smallImages.split(',');
				this.labels = this.activity.labels.split(',');
				switch (this.activity.sex) {
					case 0:
						this.labels.push('仅限女生');
						break;
					case 1:
						this.labels.push('仅限男生');
						break;
					case 2:
						this.labels.push('男女不限');
						break
				}
				if (this.activity.score > 0) {
					this.labels.push(`${this.activity.score}分`);
				}
				this.startTime = new Date(this.activity.startTime);
				this.location = this.activity.place.split(',')
				this.activity.activityUserList.forEach(item => {
					if (item.sex === 1) {
						this.boyUsers.push(item);
					} else {
						this.girlUsers.push(item);
					}
				})
				this.boyWidth = 654 / this.activity.maxPerson * this.boyUsers.length;
				this.girlWidth = 654 / this.activity.maxPerson * this.girlUsers.length;
				if (this.activity.userId === this.$userInfo.id) {
					this.userInfo = this.$userInfo;
					this.isMine = true;
				} else {
					this.getUserInfo(this.activity.userId);
				}
				this.$forceUpdate();
			},
			closeSignUp() {
				const params = {
					id: this.activity.id,
					allowJoin: 0
				}
				this.$apis.updateActivity(params).then((res) => {
					if (res.code === 0) {
						this.closePopup();
						this.getActivityDetail(this.activity.id);
						uni.showToast({
							title: '关闭报名成功!',
							icon: 'success'
						})
					}
				});
			},
			likeActivity() {
				const params = {
					activityId: this.activity.id,
					isLike: 1
				}
				this.$apis.likeOrJoinActivity(params).then(res => {
					if (res.code === 0) {
						this.getActivityDetail(this.activity.id);
						uni.showToast({
							title: '成功!',
							icon: 'success'
						})
					}
				})
			},
			cancelActivity() {
				const params = {
					id: this.activity.id,
					status: 0
				}
				this.$apis.updateActivity(params).then((res) => {
					if (res.code === 0) {
						this.closePopup();
						this.getActivityDetail(this.activity.id);
						uni.showToast({
							title: '取消活动成功!',
							icon: 'success'
						})
					}
				});
			},
			deleteActivity() {
				const params = {
					id: this.activity.id
				}
				this.$apis.deleteActivity(params).then(res => {
					if (res.code === 0) {
						this.closePopup();
						uni.showToast({
							title: '删除活动成功!',
							icon: 'success'
						});
						uni.navigateBack();
					}
				})
			},
			removeUser() {
				this.closePopup();
				uni.navigateTo({
					url: '/pages/removeUser?id=' + this.activity.id
				});
				uni.$emit('removeUser', this.activity.activityUserList)
			},
			confirmForceQuit() {
				const params = {
					activityId: this.activity.id,
					isJoin: 0
				}
				this.$apis.likeOrJoinActivity(params).then(res => {
					if (res.code === 0) {
						this.closePopup();
						this.getActivityDetail(this.activity.id);
						uni.showToast({
							title: '退出成功!',
							icon: 'success'
						})
					}
				})
			},
			confirmMusterActivity() {
				const params = {
					activityId: this.activity.id,
					isJoin: 1
				}
				this.$apis.likeOrJoinActivity(params).then(res => {
					if (res.code === 0) {
						this.closePopup();
						this.getActivityDetail(this.activity.id);
						uni.showToast({
							title: '集合成功!',
							icon: 'success'
						})
					}
				})
			},
			indexChange(event) {
				this.index = event.detail.current;
			},
			getUserInfo(id) {
				const params = {
					userId: id
				}
				this.$apis.checkUser(params).then(res => {
					if (res.code === 0) {
						this.userInfo = res.data;
					}
				});
			},
			getTimeDiff(startTime) {
				var new_date = new Date();
				var old_date = new Date(startTime);
				var diffMinutes = parseInt((new_date - old_date) / 1000 / 60);
				var hours = parseInt(diffMinutes / 60);
				var days = parseInt(diffMinutes / 60 / 24);
				var month = parseInt(diffMinutes / 60 / 24 / 31);
				var year = parseInt(diffMinutes / 60 / 24 / 31 / 12);
				let timeStr = diffMinutes + '分钟前';
				if (hours > 0) {
					timeStr = hours + '小时前';
				}
				if (days > 0) {
					timeStr = days + '天前';
				}
				if (month > 0) {
					timeStr = month + '个月前';
				}
				if (year > 0) {
					timeStr = yesr + '年前';
				}
				return timeStr;
			},
			musterActivity() {
				this.popupType = 0;
				this.$refs.bottomPopup.open();
			},
			closePopup() {
				this.$refs.bottomPopup.close();
			},
			moreControl() {
				this.popupType = 1;
				this.$refs.bottomPopup.open();
			},
			forceQuit() {
				this.popupType = 2;
			},
			back() {
				uni.navigateBack();
			},
			editActivity() {
				uni.navigateTo({
					url: `/pages/publishActivity?id=${this.activity.id}`
				});
				this.closePopup();
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.navigator-bar {
			position: absolute;
			width: calc(100vw - 64rpx);
			padding: 0 32rpx 0 32rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			z-index: 999;

			.navigator-button {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.activity-box {
			width: 100%;
			height: 100%;

			.activity-img-box {
				width: 100vw;
				height: 700rpx;
				position: relative;

				.swiper-box {
					width: 100%;
					height: 100%;

					.activity-swiper {
						width: 100%;
						height: 100%;

						.activity-img {
							width: 100vw;
							height: 700rpx;
							border-bottom-left-radius: 48rpx;
							border-bottom-right-radius: 48rpx;
							z-index: -1;
						}
					}
				}

				.labels-box {
					position: absolute;
					bottom: 32rpx;
					left: 32rpx;

					.label {
						display: inline-block;
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 20rpx;
						padding: 4rpx 16rpx 4rpx 16rpx;
						margin-right: 4rpx;
					}
				}
			}

			.activity-title {
				width: 654rpx;
				margin-left: 48rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #222222;
				margin-top: 32rpx;
			}

			.price-box {
				width: 654rpx;
				margin-left: 48rpx;
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 40rpx;
					font-weight: bold;
					color: #FF5E2E;

					.price-unit {
						font-size: 28rpx;
					}
				}

				.free {
					font-size: 40rpx;
					font-weight: bold;
					color: #31B57E;
				}

				.interested {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.time-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 48rpx 0 48rpx;
				margin-top: 32rpx;

				.num-box {
					height: 64rpx;
					background: #01122E;
					box-shadow: 0px 0px 28rpx 0px rgba(0, 0, 0, 0.2);
					border-radius: 16rpx;
					padding: 0 16rpx 0 16rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 64rpx;
				}

				.time-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
				}
			}

			.location-box {
				width: 654rpx;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 28rpx;
				margin-top: 60rpx;
				margin-left: 48rpx;
				display: flex;
				align-items: center;

				.location-img {
					width: 80rpx;
					height: 80rpx;
					margin-left: 32rpx;
				}

				.location-content {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					width: 450rpx;
					margin-left: 32rpx;

					.location-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #222222;
						width: 450rpx;
					}

					.location-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						width: 450rpx;
						margin-top: 8rpx;
						line-height: 24rpx;
					}
				}

				.location-arrow {
					width: 16rpx;
					height: 28rpx;
					margin-left: 16rpx;
				}
			}

			.muster-box {
				width: 688rpx;
				margin-left: 48rpx;
				margin-top: 60rpx;

				.muster-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #222222;
				}

				.num-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 24rpx;
					width: 654rpx;

					.sex-box {
						display: flex;
						align-items: center;

						.sex-info-box {
							display: flex;
							align-items: center;
							margin-right: 46rpx;

							.boy-img {
								width: 30rpx;
								height: 30rpx;
							}

							.girl-img {
								width: 24rpx;
								height: 34rpx;
							}

							.sex-text {
								margin-left: 16rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #222222;
							}
						}
					}

					.total-box {
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
					}
				}

				.progress-bar {
					width: 654rpx;
					height: 20rpx;
					background: #F6F7F9;
					border-radius: 10rpx;
					margin-top: 22rpx;
					position: relative;

					.abs-bar {
						position: absolute;
						display: flex;
						border-radius: 10rpx;

						.boy-progress {
							height: 20rpx;
							background: #4D96FF;
						}

						.girl-progress {
							height: 20rpx;
							background: #FF5959;
						}
					}
				}

				.avatar-list {
					width: 688rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					margin-top: 32rpx;

					.avatar-box {
						width: 64rpx;
						height: 64rpx;
						margin-right: 36rpx;
						position: relative;
						margin-bottom: 24rpx;

						.avatar-img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 32rpx;
						}

						.sex-img {
							width: 24rpx;
							height: 24rpx;
							position: absolute;
							bottom: 0;
							right: 0;
						}
					}
				}
			}

			.introduction-box {
				width: 654rpx;
				margin-top: 48rpx;
				margin-left: 48rpx;

				.introduction-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #222222;
					line-height: 36rpx;
				}

				.introduction-text {
					margin-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
				}
			}

			.rule-box {
				width: 654rpx;
				margin-top: 48rpx;
				margin-left: 48rpx;

				.rule-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #222222;
				}

				.rule-item {
					display: flex;
					margin-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;

					.rule-index {
						margin-right: 16rpx;
					}
				}
			}

			.user-info {
				width: 654rpx;
				margin-top: 48rpx;
				margin-left: 48rpx;
				display: flex;
				align-items: center;

				.avatar-box {
					width: 80rpx;
					height: 80rpx;
					position: relative;

					.avatar-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
					}

					.sex-img {
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				.user-content {
					margin-left: 32rpx;
					width: 430rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.user-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #222222;
					}

					.create-time {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 8rpx;
					}
				}

				.button {
					width: 112rpx;
					height: 64rpx;
					border-radius: 32rpx;
					border: 2rpx solid #F0F3F6;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					text-align: center;
					line-height: 64rpx;
				}
			}


		}

		.control-box {
			width: 100%;
			display: flex;
			position: absolute;
			bottom: 40rpx;
			justify-content: space-evenly;

			.button1 {
				width: 120rpx;
				height: 120rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.chat-img {
					width: 44rpx;
					height: 44rpx;
				}

				.like-img {
					width: 44rpx;
					height: 40rpx;
				}
			}

			.button2 {
				width: 200rpx;
				height: 120rpx;
				background: #FF5E2E;
				box-shadow: 0px 0px 40rpx 0px rgba(255, 94, 46, 0.4);
				border-radius: 64rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 120rpx;
				text-align: center;
			}
		}
	}

	.muster-popup {
		width: 100vw;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 60rpx;
		border-radius: 48rpx 48rpx 0 0;

		.popup-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #03122C;
		}

		.popup-text {
			font-size: 32rpx;
			font-weight: 400;
			color: #222222;
			width: 480rpx;
			margin-top: 44rpx;
			margin-bottom: 100rpx;
		}

		.button-box {
			display: flex;
			justify-content: space-evenly;
			width: 100%;

			.cancel-button {
				width: 280rpx;
				height: 100rpx;
				background: #F6F7F9;
				border-radius: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				text-align: center;
				line-height: 100rpx;
			}

			.confirm-button {
				width: 280rpx;
				height: 100rpx;
				background: #FF5E2E;
				border-radius: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}

	.control-popup {
		width: 100vw;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
		border-radius: 48rpx 48rpx 0 0;
		
		.menu-item {
			width: 100vw;
			height: 100rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #222222;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>
